<template>
  <div class="detail">
    <div class="common-div-card">
      <el-form :model="form" class="form" label-width="auto" size="small">
        <el-form-item label="厚度头部超差位置[m]：">
          <el-text>{{ form.head }}</el-text>
        </el-form-item>
        <el-form-item label="厚度本体超差位置[m]：">
          <el-text>{{ form.body }}</el-text>
        </el-form-item>
        <el-form-item label="厚度尾部超差位置[m]：">
          <el-text>{{ form.tail }}</el-text>
        </el-form-item>
        <el-form-item label="厚度全长超差位置[m]：">
          <el-text>{{ form.whole }}</el-text>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <template #header>
        <span>热轧温度曲线</span>
      </template>
      <div class="graph-height">
        <graph-line
          :data1="roughExtTemp"
          :data2="finishEntTemp"
          :datax="Array.from({ length: roughExtTemp.length }, (_, i) => i + 1)"
          :data-name="['粗轧出口温度', '精轧入口温度']"
        />
      </div>
      <div class="graph-height">
        <graph-line
          :data1="finishExtTemp"
          :data2="entLaminarCooling"
          :datax="Array.from({ length: finishExtTemp.length }, (_, i) => i + 1)"
          :data-name="['粗轧出口温度', '精轧入口温度']"
          :mark-line1="finishExtUpper"
          :mark-line2="finishExtLower"
          :mark-line3="entLamCoolUpper"
          :mark-line4="entLamCoolLower"
          :is-scale="true"
        />
      </div>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <span>S5机架厚度/带钢速度</span>
      </template>
      <div class="graph-height">
        <double-line
          :data1="standThick"
          :data2="coilSpeed"
          :datax="Array.from({ length: standThick.length }, (_, i) => i + 1)"
          :data-name="['S5机架厚度', 'S5带钢速度']"
          :mark-line1="standThickUpper"
          :mark-line2="standThickLower"
          :is-scale="true"
        />
      </div>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <span>板形</span>
      </template>
      <div class="graph-height">
        <div class="shape-chart-left">
          <shape-heatmap
            :data="lengthHeatmapData"
            :x-axis-data="lengthXAxisData"
            :y-axis-data="shapeChannels"
            title="板形仪通道号(长度序列)"
            :min="-25"
            :max="25"
          />
        </div>
        <div class="shape-chart-right">
          <shape-curve :data="shapeCurveData" :y-axis-data="shapeChannels" title="第1米板形曲线" :min="-20" :max="20" />
        </div>
      </div>
      <div class="graph-height">
        <div class="shape-chart-left">
          <shape-heatmap
            :data="timeHeatmapData"
            :x-axis-data="timeXAxisData"
            :y-axis-data="shapeChannels"
            title="板形仪通道号(时间序列)"
            :min="-25"
            :max="25"
          />
        </div>
        <div class="shape-chart-right">
          <shape-curve :data="shapeCurveData" :y-axis-data="shapeChannels" title="第1米板形曲线" :min="-20" :max="20" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, onBeforeMount } from 'vue';
  import GraphLine from './GraphLine.vue';
  import doubleLine from './doubleLine.vue';
  import ShapeHeatmap from './ShapeHeatmap.vue';
  import ShapeCurve from './ShapeCurve.vue';

  const props = defineProps({
    coilNo: { type: String, default: '' },
  });

  interface Form {
    head: string;
    body: string;
    tail: string;
    whole: string;
  }

  const form: Form = reactive({
    head: '1',
    body: '2',
    tail: '3',
    whole: '4',
  });

  // ----------------------------------------------  曲线数据 ---------------------------------------------------------------------------------

  // '粗轧出口温度', '精轧入口温度'
  const roughExtTemp = ref<any[]>([1, 2, 3, 4, 5, 6, 7, 8]);
  const finishEntTemp = ref<any[]>([8, 7, 6, 4, 5, 3, 2, 1]);

  // '精轧出口温度','层冷入口温度'
  const finishExtTemp = ref<any[]>([780, 920, 780, 920, 924, 928, 922, 930, 935, 921, 927, 929, 930, 934, 935, 923, 923, 934, 924, 925]);
  const entLaminarCooling = ref<any[]>([580, 640, 650, 620, 620, 580, 580, 600, 610, 612, 614, 616, 618, 620, 618, 616, 614, 612, 610, 490]);
  const finishExtUpper = ref(950);
  const finishExtLower = ref(900);
  const entLamCoolUpper = ref(615);
  const entLamCoolLower = ref(585);

  // S5机架厚度、带钢速度
  const standThick = ref<any[]>([
    0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45,
    0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45,
    0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47,
    0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47, 0.46, 0.47, 0.46, 0.45, 0.46, 0.47,
    0.46, 0.45, 0.46, 0.47,
  ]);
  const coilSpeed = ref<any[]>([
    1200, 1180, 1160, 1140, 1120, 1100, 1080, 1060, 1040, 1020, 1000, 980, 960, 940, 920, 900, 880, 860, 840, 820, 800, 780, 760, 740, 720, 700, 680,
    660, 640, 620, 600, 580, 560, 540, 520, 500, 480, 460, 440, 420, 400, 380, 360, 340, 320, 300, 280, 260, 240, 220, 200, 180, 160, 140, 120, 100,
    80, 60, 40, 20, 0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520,
    540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780,
  ]);
  const standThickUpper = ref(0.48);
  const standThickLower = ref(0.45);

  // ----------------------------------------------  板形数据 ---------------------------------------------------------------------------------

  // 板形仪通道号
  const shapeChannels = ref<string[]>(['OS', 'c_3', 'c_6', 'c_9', 'c_12', 'c_15', 'c_18', 'c_21', 'c_24', 'DS']);

  // 长度序列X轴数据 (1米到4181米)
  const lengthXAxisData = ref<any[]>([]);
  // 时间序列X轴数据 (03:38:39到03:48:37)
  const timeXAxisData = ref<any[]>([]);

  // 生成长度序列数据
  for (let i = 1; i <= 4181; i += 20) {
    lengthXAxisData.value.push(i);
  }

  // 生成时间序列数据
  const startTime = new Date('2024-01-01 03:38:39');
  const endTime = new Date('2024-01-01 03:48:37');
  const timeStep = 10; // 10秒间隔

  for (let time = startTime.getTime(); time <= endTime.getTime(); time += timeStep * 1000) {
    const timeObj = new Date(time);
    timeXAxisData.value.push(timeObj.toTimeString().substring(0, 8));
  }

  // 生成热力图数据 (10个通道 x 数据点数量)
  const generateHeatmapData = (xDataLength: number) => {
    const data: number[][] = [];
    for (let channel = 0; channel < 10; channel++) {
      const row: number[] = [];
      for (let x = 0; x < xDataLength; x++) {
        // 根据通道位置生成不同的数据模式
        let value = 0;
        if (channel >= 1 && channel <= 3) {
          // c_3, c_6, c_9 - 低值区域
          value = -15 + Math.random() * 10;
        } else if (channel >= 4 && channel <= 6) {
          // c_12, c_15, c_18 - 高值区域
          value = 10 + Math.random() * 15;
        } else if (channel >= 7 && channel <= 8) {
          // c_21, c_24 - 中等值区域
          value = -5 + Math.random() * 10;
        } else {
          // OS, DS - 低值区域
          value = -20 + Math.random() * 10;
        }
        row.push(value);
      }
      data.push(row);
    }
    return data;
  };

  const lengthHeatmapData = ref<number[][]>(generateHeatmapData(lengthXAxisData.value.length));
  const timeHeatmapData = ref<number[][]>(generateHeatmapData(timeXAxisData.value.length));

  // 板形曲线数据 (第1米处的数据)
  const shapeCurveData = ref<number[]>([-8, -12, -15, -10, -5, 8, 12, 15, 10, -5]);
</script>
<style lang="less" scoped>
  .detail {
    display: flex;
    gap: 1rem;
    flex-direction: column;
  }

  .el-text {
    color: rgb(121, 187, 255);
    font-weight: 700;
  }

  .graph-height {
    height: 30vh;
    display: flex;
    gap: 12px;
  }

  .shape-chart-left {
    flex: 0 0 70%;
    padding: 12px;
  }

  .shape-chart-right {
    flex: 0 0 30%;
    padding: 12px;
  }

  .form {
    padding: 12px;
  }
</style>
